<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin-top:10px<el-select">

            <el-form label-width="80px" :inline="false" size="normal">
                <el-form-item label="SPU名称">
                    xxxx
                </el-form-item>

                <el-form-item label="SKU名称">
                    <el-input placeholder="SKU名称" size="normal" clearable @change="" v-model="skuParams.skuName">
                    </el-input>
                </el-form-item>

                <el-form-item label="价格(元)">
                    <el-input type="number" placeholder="价格" v-model="skuParams.price"></el-input>
                </el-form-item>

                <el-form-item label="重量(千克)">
                    <el-input type="number" placeholder="重量" v-model="skuParams.weight"></el-input>
                </el-form-item>

                <el-form-item label="规格描述">
                    <el-input type="textarea" placeholder="描述" v-model="skuParams.skuDesc"></el-input>
                </el-form-item>

                <el-form-item label="平台属性">
                    <el-form label-width="80px" :inline="true" size="normal">
                        <el-form-item :label="val.attrName" v-for="(val,index) in AttrList" :key="val.id">
                            <!-- 动态给对象中添加一个属性 attrIdAndValueId 收集 用户选择的下拉项 记录名字和ID -->
                            <el-select v-model="val.attrIdAndValueId">
                                <el-option :label='item.valueName' :value="`${val.id}:${item.id}`"
                                    v-for="(item,index) in val.attrValueList" :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>


                    </el-form>
                </el-form-item>

                <el-form-item label="销售属性">
                    <el-form label-width="80px" :inline="true" size="normal">

                        <el-form-item :label="val.saleAttrName" v-for='(val,index) in SpuSaleAttrList' :key="val.id">
                            <el-select v-model="val.saleIdAndValueId">
                                <el-option :label='item.saleAttrValueName' :value='`${val.id}:${item.id}`'
                                    v-for="(item,index) in val.spuSaleAttrValueList" :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>


                    </el-form>
                </el-form-item>

                <el-table border stripe style="margin-bottom:10px" :data="SpuImageList" ref="tabRef">
                    <el-table-column type="selection" width="80"></el-table-column>
                    <el-table-column label="图片">
                        <template #="{row,$index}">
                            <img :src="row.imgUrl" alt="" style="width:100px; height:100px;">
                        </template>
                    </el-table-column>
                    <el-table-column label="名称" prop="imgName"></el-table-column>
                    <el-table-column label="操作">

                        <template #="{row,$index}">
                            <el-button :type="row.flag == 1?'success':'info'" size="small" @click="skuImg(row)">
                                {{row.flag == 1?'默认':'设为默认'}}</el-button>
                        </template>

                    </el-table-column>
                </el-table>

                <el-button type="primary" size="default" @click="save">保存</el-button>
                <el-button size="default" @click="qxClick">取消</el-button>

            </el-form>
        </el-card>


    </div>
</template>

<script setup lang="ts">
import { reqAttrList, reqSpuImageList, reqSpuSaleAttrList, reqAddSku } from '@/api/product/spu/spu'
import { ElMessage } from 'element-plus';
import { ref, nextTick } from 'vue'
let emit = defineEmits(['figure'])

//存储平台属性
let AttrList = ref([])
//存储照片墙
let SpuImageList = ref([])
//存储销售属性
let SpuSaleAttrList = ref([])
//table组件的实例
let tabRef = ref()
//收集添加需要用的参数
let skuParams = ref({
    //父组件传递过来的
    category3Id: 0, //三级分类的ID
    spuId: 0, //SPU的ID
    tmId: 0, //spu的品牌的ID

    //v-model收集
    skuName: "", //sku的名字
    price: 0, //sku的价格
    weight: 0, //sku的重量
    skuDesc: "", //sku的描述

    skuDefaultImg: "", //默认图片地址
    skuAttrValueList: [
        //平台属性
        // {
        //   attrId: 0, //属性的id
        //   valueId: 0, //属性值的ID
        // },
    ],
    skuSaleAttrValueList: [
        //销售属性
        // {
        //   saleAttrId: 0,
        //   saleAttrValueId: 0,
        // },
    ],
})

//保存按钮
const save = async () => {

    skuParams.value.skuAttrValueList = AttrList.value.reduce((prev, curr) => {

        if (curr.attrIdAndValueId) {
            const [attrId, valueId] = curr.attrIdAndValueId.split(":")
            prev.push({ attrId, valueId })

        }
        return prev
    }, [])

    skuParams.value.skuSaleAttrValueList = SpuSaleAttrList.value.reduce((prev, curr) => {

        if (curr.saleIdAndValueId) {
            const [saleAttrId, saleAttrValueId] = curr.saleIdAndValueId.split(":")
            prev.push({ saleAttrId, saleAttrValueId })

        }
        return prev
    }, [])

    console.log(skuParams.value.skuSaleAttrValueList, skuParams.value.skuAttrValueList);


    if (skuParams.value.skuAttrValueList.length > 0 && skuParams.value.skuSaleAttrValueList.length > 0) {

        try {
            await reqAddSku(skuParams.value)
            ElMessage({
                type: 'success',
                message: '添加成功'
            })
            emit('figure', {
                soene: 0,
                flag: ''
            })
        } catch (error) {
            ElMessage({
                type: 'error',
                message: '添加失败'
            })
        }


    } else {
        ElMessage({
            type: 'error',
            message: '请选销售属性或平台属性'
        })
        return;
    }
}

//默认图片的地址
const skuImg = (row) => {
    SpuImageList.value.forEach((item) => {
        item.flag = 0
        tabRef.value.toggleRowSelection(item, false)
    })
    row.flag = 1
    tabRef.value.toggleRowSelection(row, true)
    skuParams.value.skuDefaultImg = row.imgUrl
}

const qxClick = () => {
    emit('figure', {
        soene: 0,
        flag: ''
    })
}
const SonSku = async (c1id, c2id, spu) => {

    //获取平台全部属性数据
    let result = await reqAttrList(c1id, c2id, spu.category3Id)
    //获取已有的照片墙数据
    let result1 = await reqSpuImageList(spu.id)
    //获取已有的销售属性接口
    let result2 = await reqSpuSaleAttrList(spu.id)

    AttrList.value = result

    SpuImageList.value = result1

    SpuSaleAttrList.value = result2

    skuParams.value.category3Id = spu.category3Id
    skuParams.value.spuId = spu.id
    skuParams.value.tmId = spu.tmId

    nextTick(() => {
        tabRef.value.toggleRowSelection(SpuImageList.value[0], true)
        SpuImageList.value[0].flag = 1
        skuParams.value.skuDefaultImg = SpuImageList.value[0].imgUrl
    })
}



defineExpose({
    SonSku
})

</script>

<style scoped>

</style>